{%extends "root.html" %}

<body>
    {% block userInfo %}
    <div class="title iconfont icon-shezhi"> 分类</div>
    {% endblock %}

    {% block mainbody %}
    <!-- 这里放置主要内容 -->
    <style type="text/css">
        .subContent {
            display: grid;
            width: calc(45vw);
            margin: 0 auto;
            min-width: 750px;
            grid-template-columns: 1fr 1fr;
        }

        main {
            min-height: calc(75vh - 118px);
        }

        @media only screen and (max-width:768px) {
            .subContent {
                display: grid;
                width: 90vw;
                margin: 0 auto;
                grid-template-columns: 1fr;
                min-width: 0px;
            }

            main {
                min-height: calc(75vh - 38px);
            }
        }
    </style>
    <script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>

    <div class="settingsContainer">
        <table>
            <colgroup>
                <col width="16.6%">
                <col width="16.6%">
                <col width="16.6%">
                <col width="16.6%">
                <col width="16.6%">
                <col width="16.6%">
            </colgroup>
            <thead>
                <tr class="nodrag">
                    <th>序号</th>
                    <th>分类标题</th>
                    <th>时间</th>
                    <th>访客可见</th>
                    <th>文章数量</th>
                    <th>执行操作</th>
                </tr>
            </thead>
            <tbody>
                {% for i in metaList %}
                <tr>
                    <td>No.{{i.index}}</td>
                    <td>{{i.name}}</td>
                    <td>{{i.date}}</td>
                    <td>{{i.isPublic}}</td>
                    <td>{{i.count}}</td>
                    <td>
                        <div class="action" style="margin: 0 auto;">
                            <a href="javascript:renameMeta('{{i.id}}');" class="rename" title="重命名此分类">重命名</a>
                            <a href="javascript:deleteMeta('{{i.id}}');" class="delete" title="删除此分类">删除</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="sub">
            <button type="button" onclick="window.location='/user/'" class="iconfont icon-qiehuan"> 个性化</button>
            <button type="button" onclick="createMeta()" class="iconfont icon-xinjian"> 新建</button>
        </div>
    </div>
    <script type="text/javascript">
        // 渲染页面

        axios.interceptors.request.use((config) => {
            config.headers['X-Requested-With'] = 'XMLHttpRequest';
            let regex = /.*csrftoken=([^;.]*).*$/;
            config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
            return config
        });

        function deleteMeta(value) {
            layer.confirm('此操作不可恢复，确认继续么？(将会删除分类下文章)', {
                btn: ['确认', '取消'] //按钮
            }, function () {
                var httpUrl = "/deleteMeta/?delete=" + value
                layer.msg('删除中...', {
                    icon: 16
                    , shade: 0.01
                });
                axios.get(
                    httpUrl
                ).then((response) => {
                    layer.msg(response.data.msg, {icon: response.data.status});
                    location.reload();
                }).catch((err) => {
                    layer.msg("发生错误了呢");
                    console.error(err);
                })
            }, function () {
                layer.msg("已取消")
            });
        }

        function createMeta() {
            layer.prompt({ title: '请输入分组名称', formType: 0 }, function (pass, index) {
                layer.close(index);
                var httpUrl = "/upload/meta/";
                if (pass == "") {
                    layer.msg("名称不能为空！");
                    return false;
                }
                var data = Qs.stringify({
                    "name": pass,
                });
                layer.msg('新建中...', {
                    icon: 16
                    , shade: 0.01
                });
                axios.post(
                    httpUrl,
                    data,
                ).then((response) => {
                    // console.log(response)
                    layer.msg(response.data.msg, {icon: response.data.status});
                    location.reload()
                    // initPage()
                    // location.reload()

                }).catch((err) => {
                    layer.msg("发生错误了呢~")
                    // console.error(err)
                })
            });
        }

        function renameMeta(value) {
            layer.prompt({ title: '请输入分组新名称', formType: 0 }, function (pass, index) {
                layer.close(index);
                var httpUrl = "/renameMeta/";
                if (pass == "") {
                    layer.msg("名称不能为空！");
                    return false;
                }
                var data = Qs.stringify({
                    "name": pass,
                    "metaId": value
                });
                layer.msg('重命名中...', {
                    icon: 16
                    , shade: 0.01
                });
                axios.post(
                    httpUrl,
                    data,
                ).then((response) => {
                    // console.log(response)
                    layer.msg(response.data.msg, {icon: response.data.status});
                    location.reload()
                    // initPage()
                    // location.reload()

                }).catch((err) => {
                    layer.msg("发生错误了呢~")
                    // console.error(err)
                })
            });
        }

    </script>

    <style type="text/css">
        /* @import url("//at.alicdn.com/t/font_2336002_go3jvbbk1c.css"); */

        .title {
            /* margin: 5vh auto; */
            margin: 5vh auto;
            text-align: center;
            font-size: 36px;
            line-height: 38px;
        }

        .settingsContainer {
            width: 40vw;
            margin: 0 auto;
            /* padding: 20px; */
        }

        .settingsContainer>div {
            margin-top: 10px;
            margin-bottom: 5px;
        }

        .settingsContainer>input[type="text"] {
            width: calc(100% - 24px);
            line-height: 24px;
            font-size: 14px;
            /* border-radius: 5px; */
            padding-left: 10px;
            padding-right: 10px;
            letter-spacing: 1px;
            outline: none;
            border: 2px solid #b9b9b9;
        }

        .settingsContainer>input[type="text"]:focus {
            border: 2px solid #11999e;
        }

        .settingsContainer textarea {
            border: 0;
            width: calc(100% - 24px);
            height: 10vh;
            padding: 10px;
            resize: none;
            outline: none;
            border: 2px solid #B9B9B9;
            /* font-family: "微软雅黑"; */
            font-size: 14px;
        }

        .settingsContainer textarea:focus {
            border: 2px solid #11999e;
        }

        .settingsContainer>.sub {
            display: flex;
        }

        .settingsContainer button {
            width: 49%;
            /* height: ; */
            padding-top: 8px;
            padding-bottom: 8px;
            outline: none;
            /* margin-top: 8px; */
            cursor: pointer;
            font-size: 16px;
            margin: 8px auto;
            transition: color .4s, background-color .4s, border-color .4s;
            background-color: #FFFFFF;
            color: #11999e;
            border: 2px solid #11999e;
        }

        .settingsContainer button:hover {
            background-color: #11999e;
            border: 2px solid #11999e;
            color: #FFFFFF;
        }

        table {
            border-collapse: separate;
            text-indent: initial;
            border-spacing: 0px 10px;
        }

        table th {
            /* padding: 0 10px 10px; */
            /* border-bottom: 2px solid #F0F0EC; */
            text-align: left;
            padding: 5px 20px;
            background-color: #5b5b5b;
            color: #FFFFFF;
            /* margin: 5px 0px; */
        }

        tbody td {
            /* margin: 50px 0; */
            background-color: #F3F3F3;
            /* padding: 40px 0px; */
            margin: 50px 0;
            padding: 5px 20px;
        }

        table a {
            text-decoration: none;
        }

        table a.delete {
            color: #f38181;
        }

        table a.rename {
            color: #11999e;
        }

        .settingsContainer>table {
            width: 100%;
        }

        @media only screen and (max-width:768px) {
            .settingsContainer {
                width: 90vw;
                margin: 0 auto;
                /* padding: 20px; */
            }
        }
    </style>


    {% endblock %}
</body>